<template>
  <bs-dialog
    title="终端状态"
    :visible.sync="showDialog"
    size="default"
    @closed="doCloseEdit"
    class="insert-test"
  >
    <template slot="main">
      <device-state-info :editor-form="statusInfo"></device-state-info>
    </template>
    <template slot="footer">
      <bs-refresh-button-icon :show-icon="false" @click.native="doRefresh"></bs-refresh-button-icon>
      <bs-cancel-button-icon :show-icon="false" @click.native="doCloseEdit">></bs-cancel-button-icon>
    </template>
  </bs-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import DeviceStateInfo from '../../device-monitor/components/State/DeviceStateInfo'
export default {
  name: 'DeviceStatusInfoDialog',
  data() {
    return {
      showDialog: false,
      statusInfo: {},
    }
  },
  created() {
    this.$eventBus.$on('showDeviceStatusDialog', this.show)
  },
  beforeDestroy() {
    this.$eventBus.$off('showDeviceStatusDialog')
  },
  components: {
    DeviceStateInfo,
  },
  directives: {
    elDragDialog,
  },
  methods: {
    // 显示
    show(info) {
      //   先进行一次信息的请求根据id
      this.statusInfo = info
      this.showDialog = true
    },
    // 关闭
    doCloseEdit: function () {
      this.showDialog = false
    },
    doRefresh() {
      this.$emit('refresh');
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 700px;
  height: 650px;
}
::v-deep .el-dialog__body {
  margin-left: 10px;
  margin-top: 10px;
}
.status-row {
  padding: 5px;
}
</style>
